<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
    padding: 0;
    margin: 0;
    list-style:  none;
}
#tab{
    width: 1000px;
    height: 800px;
    margin-left: 100px;
}
#tab > ul{
    width: 100%;
    height: 100%;
    position: relative;
}
#tab > ul > li{
    width: 300px;
    height: 200px;
    background-color: pink;
    border-bottom: 1px solid white;
    
    box-sizing: border-box;
}
/*#tab > ul > li:hover{
    background-color: blue;
}
#tab > ul > li:hover > div{
    display: block;
}*/
#tab > ul > li > div{
    width: 700px;
    height: 800px;
    
    position: absolute;
    left: 300px;
    top: 0;
    
    font-size: 100px;
    
    display: none;
}
</style>
</head>
<body>
<div id="tab">
    <ul>
        <li>
            <p>电脑</p>
            <div>很多电脑产品</div>
        </li>
        <li>
            <p>食品</p>
            <div>很多好吃的</div>
        </li>
        <li>
            <p>服装</p>
            <div>很多服装</div>
        </li>
        <li>
            <p>旅游</p>
            <div>旅游产品</div>
        </li>
    </ul>
</div>
<script>
var lis = document.querySelectorAll("li");
for(let i = 0; i < lis.length; i++){
    lis[i].onmouseenter = function (){
        lis[i].lastElementChild.style.display = "block";
        lis[i].style.backgroundColor = "blue";
    }
    lis[i].onmouseleave = function (){
        lis[i].lastElementChild.style.display = "none";
        lis[i].style.backgroundColor = "";
    }
}
</script>
</body>
</html>